<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>学生表格</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="stylesheet" type="text/css" th:href="@{css/materialdesignicons.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/bootstrap.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/animate.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/style.min.css}">
</head>

<body>
<div th:include="comm/comm.html"></div>
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid p-t-15">

    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <header class="card-header"><div class="card-title">学生信息</div></header>
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">添加学生</h4>
                </div>
                <form >
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="stu-name">姓名</span>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入学生姓名">
                  </div>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="stu-sex">性别</span>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入学生性别">
                  </div>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="stu-phone">号码</span>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入学生号码">
                  </div>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="stu-hour">课时</span>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入学生课时">
                  </div>
                </form>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">提交更改</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal -->
          </div>
          <div class="card-body">
            <button type="button" class="btn btn-outline-brown"   data-toggle="modal" data-target="#myModal">添加</button>
            <table id="my_table" class="table">
              <thead>
              <tr>
                <th>#</th>
                <th>姓名</th>
                <th>班级</th>
                <th>电话</th>
                <th>剩余课时</th>
                <th>教师</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
          <nav>
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link" href="#!" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                  <span class="sr-only">上一页</span>
                </a>
              </li>
              <li class="page-item"><a class="page-link" href="#!">1</a></li>
              <li class="page-item"><a class="page-link" href="#!">2</a></li>
              <li class="page-item"><a class="page-link" href="#!">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#!" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                  <span class="sr-only">下一页</span>
                </a>
              </li>
            </ul>
          </nav>

        </div>
      </div>
    </div>
  </div>
  </div>
</main>
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery.cookie.min.js}"></script>
<script type="text/javascript" th:src="@{js/main.min.js}"></script>
<script type="text/javascript" th:src="@{js/hour.js}"></script>
<script type="text/javascript" th:src="@{js/jquery-paging.js}"></script>
<script th:src="@{https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js}"></script>
<script type="text/javascript">
  L2Dwidget.init({
    "model": { "jsonPath":" https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
    "display": { "position": "right", "width": 200, "height": 350, "hOffset": 0, "vOffset": 0 },
    "mobile": { "show": true, "scale": 0.5 },
    "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 }
  });

</script>
</body>
</html>